import React from "react";
import "./StyleDemo.css"
import myStyle from './StyleDemo.module.css'
import flower from './../assets/flower.png'
export default class StyleDemo extends React.Component {
  state = {
    box: { color: 'red', fontSize: '30px', backgroundColor: 'gray' },
    list: [
      { id: 1, src: require('./../assets/panda2.webp'), name: 'panda' },
      { id: 2, src: require('./../assets/flower.png'), name: 'flower' },
      { id: 3, src: require('./../assets/panda2.webp'), name: 'panda' }
    ]
  }
  render() {
    return (
      <>
        <h1>样式图片处理</h1>
        {/* 1. 内联样式表 */}
        <div style={{ color: 'red', fontSize: '30px', backgroundColor: 'gray' }}>内联样式表</div>
        <div style={this.state.box}>内联样式表2222</div>
        {/* 2. 外部样式表 */}
        <div className="div-1">外部样式表 </div>
        {/* 3. 局部样式表，只能是组件自己使用，导入为一个对象，按照对象名.选择器名 来使用，
         如果选择器有"-"拼接的，要使用【】是表示对象的属性名。
        */}
        <div>
          <button type="button" className={myStyle['btn-error']}>error</button>
          <button type="button" className={myStyle['btn-success']}>success</button>
          <button type="button" className={myStyle.danger}> danger</button>

        </div>
        {/* 图片的使用 */}
        <div>
          <img src={flower} alt="" className={myStyle.flower} />
          <img src={require('./../assets/panda2.webp')} alt="" className={myStyle.flower} />

          {/* 曾经遇到过：require().default 才可以加载图片 */}
          {/* <img src={require('./../assets/flower.png').default} alt="" className={myStyle.flower} /> */}

          {/* 如果是模拟数据 */}
          <div>
            {this.state.list.map((el, i) => {
              return <img key={i} src={el.src} className={myStyle.flower} />
            })}
          </div>
        </div>
      </>
    )
  }
}